<template>
  <van-swipe class="banner" :autoplay="3000" indicator-color="white">
    <template v-for="(item, index) in banners" :key="index">
      <van-swipe-item>
        <img :src="proxyImageUrl(item.i)" class="banner-img" />
      </van-swipe-item>
    </template>
  </van-swipe>

  <van-list
    class="recommend-list"
    v-model:loading="loading"
    :immediate-check="true"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :scrollable-container="getScrollContainer"
  >
    <ul class="list">
      <li
        class="list-item"
        v-for="(item, index) in lists"
        :key="index"
        @click="goToRecipe(item.r.id)"
      >
        <!-- feed 广告 -->
        <template v-if="isAdAtRecommend(item)">
          <div class="cover">
            <img :src="proxyImageUrl(item.dsp.i)" class="thumbnail" />
          </div>
          <div class="title">{{ item.dsp.t }}</div>

          <!-- 话题 -->
          <div class="topic" v-if="item.r && item.r.events && item.r.events.length > 0">
            <template v-for="(event, index) in item.r.events" :key="index">
              <p><img :src="hashTag" class="hashTag" />{{ event.c }}</p>
            </template>
          </div>
          <div class="author">
            <img :src="item.dsp.user.user_photo" class="logo" />
            {{ item.dsp.user.nick }}
          </div>
        </template>
        <!-- feed  -->
        <template v-else>
          <div class="cover">
            <img :src="proxyImageUrl(item.r.gif)" class="thumbnail" />
            <van-icon
              name="play-circle"
              class="play-circle reverse-icon"
              v-if="item.r.vfurl != ''"
            />
          </div>
          <div class="title">{{ item.r.n }}</div>
          <!-- 话题 -->
          <div class="topic" v-if="item.r && item.r.events && item.r.events.length > 0">
            <template v-for="(event, index) in item.r.events" :key="index">
              <p><img :src="hashTag" class="hashTag" />{{ event.c }}</p>
            </template>
          </div>
          <div class="author-social">
            <div class="author">
              <img :src="item.r.a.p" class="avatar" />
              {{ item.r.a.n }}
            </div>
            <div class="social"></div>
          </div>
        </template>
      </li>
    </ul>
  </van-list>
</template>

<script setup>
import hashTag from '@/assets/hashTag.png'

import { fetchHomeRecommendList } from '@/api/index.js'
import { ref, computed, onMounted, watch, onActivated, nextTick } from 'vue'
import { isAdAtRecommend, proxyImageUrl } from '@/tool/index.js'
import router from '@/router'

const props = defineProps({
  activeTab: {
    type: Number,
    default: 0,
  },
})

const pageNumber = ref(1)
const limit = ref(10)
const offset = computed(() => {
  return (pageNumber.value - 1) * limit.value
})

const loading = ref(false)
const finished = ref(false)

const banners = ref([])
const lists = ref([])
const currentResponseLength = ref(0)

const isInit = ref(true)

onMounted(() => {
  initLoad(offset.value, limit.value, isInit.value)
})

// 初始化加载
const initLoad = async (offset, limit, isInit) => {
  await getHomeRecommendList(offset, limit, isInit)
}

const onLoad = async () => {
  if (finished.value) {
    loading.value = false
    return
  }
  pageNumber.value++
  isInit.value = false
  await getHomeRecommendList(offset.value, limit.value, isInit.value)
}

const getHomeRecommendList = async (offset, limit, isInit) => {
  try {
    loading.value = true

    const { state, result } = await fetchHomeRecommendList(offset, limit)

    if (state === 'success') {
      currentResponseLength.value = result.list.length

      if (currentResponseLength.value > 0) {
        // 如果是初始化加载
        if (isInit) {
          banners.value = result.banner
          lists.value = result.list
        } else {
          lists.value = [...lists.value, ...result.list]
        }
      } else {
        finished.value = true
      }
    } else {
      // 如果请求失败，回退页码
      console.log('请求fail，回退页码')
      pageNumber.value--
      loading.value = false
    }
  } catch (error) {
    console.log('获取推荐列表错误:', error)
    pageNumber.value--
  } finally {
    loading.value = false
  }
}

const goToRecipe = (id) => {
  router.push({ path: `/recipe/${id}` })
  nextTick(() => {
    window.scrollTo(0, 0)
  })
}
</script>

<style scoped lang="scss">
.banner {
  margin: 10px;
  padding: 0;
  height: auto;
  overflow: hidden;

  .banner-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover; // 缩放图片以适应容器
    object-position: center; // 居中显示
  }
}

.recommend-list {
  min-height: 100vh;

  :deep(.van-list__finished-text) {
    padding-bottom: 50px; // 避免被底部TabBar遮挡
  }

  .list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    column-gap: 10px;
    padding: 10px;

    .list-item {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      display: flex;
      flex-direction: column;
      height: 100%;

      .cover {
        position: relative;
        width: 100%;
        // padding-bottom: 133.33%; // 3:4 宽高比
        aspect-ratio: 3 / 4;
        margin-bottom: 5px;

        .thumbnail {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          object-fit: cover;
        }

        .play-circle {
          position: absolute;
          top: 10px;
          right: 5px;
        }

        .reverse-icon {
          filter: invert(0.6);
        }
      }

      .title {
        // 标题最多显示两行
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        margin-bottom: 10px;
      }

      .topic {
        font-size: 12px;
        margin-bottom: 5px;
        color: #87ceeb;
        line-height: 1.4;

        p {
          margin: 0;
          padding: 5px;
          display: inline-block;

          .hashTag {
            width: 12px;
            height: 12px;
            margin-right: 4px;
            vertical-align: middle;
            // filter: invert(0.5) brightness(1.2);
            // opacity: 0.8;
          }
        }
      }

      .author {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;

        .logo {
          // 头像 设置为圆形
          border-radius: 50%;
          width: 20px;
          height: 20px;
          object-fit: cover;
        }
      }

      .author-social {
        display: flex;
        align-items: center;

        .author {
          font-size: 12px;
          color: #999;

          .avatar {
            // 头像 设置为圆形
            border-radius: 50%;
            width: 20px;
            height: 20px;
            object-fit: cover;
            display: block;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>
